<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Date_V3.aspx.cs" Inherits="Date_V3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	



<!-- wrapper, inputs and labels  -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/flight.css"/>

<!-- calendar styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/flight-calendar.css"/>

</head>

<body>
    <form id="flight" runat="server">

   <label> 
   	Arrival <br />  
   	<input type="date" name="arrival" value="Today" /> 
   </label>

   
   <label> 
   	Departure <br /> 
   	<input type="date" name="departure" data-value="7" value="After one week" /> 
   </label>
	
</form>

<script>

$(":date").dateinput({ trigger: true, format: 'dd mmmm yyyy', min: -1 })


// use the same callback for two different events. possible with bind
$(":date").bind("onShow onHide", function()  {
	$(this).parent().toggleClass("active"); 
});


// when first date input is changed
$(":date:first").data("dateinput").change(function() {
		
	// we use it's value for the seconds input min option
	$(":date:last").data("dateinput").setMin(this.getValue(), true);
});
</script>

</body>
</html>
